/* eslint-disable */
<template>

  <a-card :bordered="false">

    <div class="table-operator">
      <a-button class="but_item" type="dashed" @click="returnPage" icon="rollback">返回</a-button>
    </div>
    <a-divider orientation="left">
      全局数据权限配置
    </a-divider>
    <global-config ref="GlobalConfig" @ok="handleOk"></global-config>
    <a-divider orientation="left">
      自定义数据权限配置
    </a-divider>
    <a-table
      ref="table"
      :rowKey="(record) => record.id"
      :pagination="false"
      :defaultExpandAllRows="true"
      :columns="columns"
      :dataSource="data"
      :loading="loading"
      showPagination="auto"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
    >

      <span slot="type" slot-scope="text">
        {{ text ? menuTypeFilter(text) : '' }}
      </span>
      <span slot="dataScopeType" slot-scope="text">
        {{ text ? dataScopeTypeFilter(text) : '' }}
      </span>
      <span slot="ownDataScope" slot-scope="text">
        <!-- {{ text || '无' }} -->
        <div v-if="text.length > 0">
          <span v-for="org in text" :key="org">
            <a-tag :color="'blue'"> {{ orgFilter(org) }}</a-tag>
          </span>
        </div>
        <div v-else>{{ '' }}</div>
      </span>
      <span slot="action" slot-scope="text, record">
        <template v-if="record.type == '2'">
          <a v-if="hasPerm('sysMenu:edit')" @click="$refs.editForm.open(record, roleId)">配置</a>
          <a-divider type="vertical" v-if="hasPerm('sysMenu:edit') & hasPerm('sysMenu:delete')"/>
          <a-popconfirm v-if="hasPerm('sysMenu:delete')" placement="topRight" title="确定删除？" @confirm="() => handleDel(record)">
            <a>删除</a>
          </a-popconfirm>
        </template>
      </span>

    </a-table>

    <edit-form ref="editForm" @ok="handleOk"/>
  </a-card>

</template>

<script>
  import { getGrantMenuList, deleteMenuDataScope } from '@/api/modular/system/menuManage'
  import editForm from './editForm'
  import { sysDictTypeDropDown } from '@/api/modular/system/dictManage'
  import { getOrgList } from '@/api/modular/system/orgManage'
  import GlobalConfig from './globalConfig.vue'

  export default {
    components: {
      editForm,
      GlobalConfig
    },

    data () {
      return {
        data: [],
        loading: true,
        columns: [
          {
            title: '菜单名称',
            dataIndex: 'name',
            width: '20%'
          },
          {
            title: '菜单类型',
            dataIndex: 'type',
            scopedSlots: { customRender: 'type' }
          },
          {
            title: '授权范围',
            dataIndex: 'dataScopeType',
            scopedSlots: { customRender: 'dataScopeType' }
          },
          {
            title: '自定义数据范围',
            dataIndex: 'ownDataScope',
            scopedSlots: { customRender: 'ownDataScope' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: 150,
            scopedSlots: { customRender: 'action' }
          }
        ],
        selectedRowKeys: [],
        // 菜单类型
        menuTypeDict: [],
        // 数据范围类型
        dataScopeTypeDict: [],
        orgList: [],
        roleId: null
      }
    },

    created () {
      this.sysDictTypeDropDown()
      this.getOrgList()
    },

    methods: {
      open (record) {
        this.roleId = record.id
        console.log(record)
        this.$refs.GlobalConfig.roleOrg(record)
        this.loadData()
      },

      loadData () {
        this.loading = true
        getGrantMenuList({ id: this.roleId }).then((res) => {
          if (res.success) {
            this.data = res.data
          }
        }).finally(() => {
          this.loading = false
        })
      },

      menuTypeFilter (type) {
        // eslint-disable-next-line eqeqeq
        const values = this.menuTypeDict.filter(item => item.code == type)
        if (values.length > 0) {
          return values[0].value
        }
      },
      dataScopeTypeFilter (type) {
        // eslint-disable-next-line eqeqeq
        const values = this.dataScopeTypeDict.filter(item => item.code == type)
        if (values.length > 0) {
          return values[0].value
        }
      },
      orgFilter (id) {
        // eslint-disable-next-line eqeqeq
        const values = this.orgList.filter(item => item.id == id)
        if (values.length > 0) {
          return values[0].name
        }
      },
      /**
       * 获取机构列表
       */
      getOrgList () {
        getOrgList().then(res => {
          this.orgList = res.data
        })
      },

      /**
       * 获取字典数据
       */
      sysDictTypeDropDown () {
        sysDictTypeDropDown({ code: 'menu_type' }).then((res) => {
          this.menuTypeDict = res.data
        })
        sysDictTypeDropDown({ code: 'data_scope_type' }).then((res) => {
          this.dataScopeTypeDict = res.data
        })
      },

      handleOk () {
        this.loadData()
        this.$emit('ok')
      },
      handleDel (menuRecord) {
        deleteMenuDataScope({ roleId: this.roleId, menuId: menuRecord.id }).then((res) => {
           if (res.success) {
             this.$message.success('删除成功')
             this.loadData()
           } else {
             this.$message.error('删除失败：' + res.message)
           }
        }).catch((err) => {
            this.$message.error('错误：' + err.message)
        })
      },

      onSelectChange (selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },

      // 返回主页面
      returnPage () {
        this.$refs.GlobalConfig.handleCancel()
        this.$emit('close')
      }
    }
  }

</script>
<style scoped>

  .table-operator {
    margin-bottom: 18px;
  }
  button {
    margin-right: 8px;
  }

</style>
